<%@ page language="java" pageEncoding="UTF-8"%>

<%
	String logoutUrl = "";// AppConfig.getCasConfig().getLogoutUrl();
	pageContext.setAttribute("$logoutUrl", logoutUrl);
%>
<link rel="stylesheet" type="text/css" href="${$res_path_resources}/css/sys-resource-icons.css" />
<style type="text/css">
#nav {
	position: absolute;
	width: 100%;
	top: 22px;
	border-bottom: #3164a6 solid 2px;
}

#nav #sysMenu {
	margin-left: 230px;
	font-size: 14px;
}

#sysMenu ul li {
	float: left;
	font-family: 微软雅黑;
	color: #333;
	height: 35px;
	cursor: pointer;
	overflow: hidden;
	margin-right: 1px;
}

.limg,.rimg {
	font-size: 15px;
	margin-top: 10px;
	height: 30px;
	float: left;
}

.limg {
	background: url("${$res_path_resources}/theme/default/images/l.png")
		no-repeat left top;
	width: 9px;
}

.rimg {
	background: url("${$res_path_resources}/theme/default/images/r.png")
		no-repeat right top;
	white-space: nowrap;
	line-height: 24px;
	padding-right: 9px;
}

#top #sysMenu .selected .limg,#top #sysMenu .selected .rimg {
	font-size: 18px;
	line-height: 34px;
	margin-top: 6px;
}

#date {
	background: url('${$res_path_resources}/images/date.gif') no-repeat left
		center;
}

.x-window .password {
	background: url('${$res_path_resources}/images/password.gif') no-repeat
		left center;
}

.top_table {
	width: 100%;
	background-color: #eef9d7;
	background-image:
		url('${$res_path_resources}/theme/default/images/top_bg.gif');
	background-repeat: no-repeat;
	background-position: 0 -28px;
	background-image:
		url('${$res_path_resources}/theme/default/images/top_bg.gif');
}
</style>

<script type="text/javascript">
	$(function() {
		$("#sysMenuli:first").addClass("selected");
	});
</script>

<div id="top" style="height: 100%; overflow: hidden; position: relative;">
	<div id="date" style="position: absolute; left: 64px; top: 30px; line-height: 28px; font-family: 微软雅黑; padding-left: 18px;">
		<span id="current_time"></span>
	</div>
	
	<div id="nav">
		<div id="sysMenu">
			<ul id="navItems">
			</ul>
		</div>
		<div style="position: absolute; right: 0px;top: 10px;">
			<div style="float: right; padding: 1px; margin-right: 10px; line-height: 28px; font-family: 微软雅黑;">
				主题： <select onchange="changeTheme(this)">
					<option value="def">默认</option>
					<option value="gray" <%="gray".equals(request.getAttribute("$theme"))
					? "selected='selected'"
					: ""%>>经典灰</option>
				</select>
			</div>
		</div>
	</div>
	<div style="z-index: 999999">
		<table class="top_table">
			<tr>
				<td width="100px;" style="height: 55px;"><img src="${$res_path_resources}/theme/default/images/logo.gif" alt="" border="0"></td>
				<td valign="top">
					<div style="float: left; font-size: 22px; width: 354px; vertical-align: middle; font-weight: bolder;">热水在线远程监控系统</div>
				</td>
				<td valign="top"><div style="float: right; font-size: 12px;">
						<ul>
							<li style="float: left; margin-right: 10px;"><a href="#" onclick="updatePassword()">修改密码 </a></li>
							<li style="float: left; margin-right: 10px;"><a href="#" onclick="logout()">注销</a></li>
						</ul>
					</div>
					<div style="float: right; margin-right: 100px; font-size: 14px;">
						<ul>
							<li style="float: left; margin-right: 10px;">用户：张三</li>
							<li style="float: left; margin-right: 10px;">隶属机构：<organization:getUserDefaultOrg />
							</li>
						</ul>
					</div></td>
			</tr>
		</table>
	</div>
	<div class="clear"></div>
</div>

<%
	/**
	 map.put("id", resource.getId());
	 map.put("name", resource.getName());
	 map.put("cusCode", resource.getCusCode());
	 map.put("code", resource.getCode());
	 map.put("parentCode", resource.getParentCode());
	 map.put("resUrl", resource.getResUrl());
	 map.put("type", resource.getType());
	 map.put("sortNo", resource.getSortNo());
	 map.put("grade", resource.getGrade());
	 map.put("leaf", resource.getLeaf());
	 map.put("enable", resource.getEnable());
	 map.put("visiable", resource.getVisiable());
	 map.put("iconCls", resource.getIconCls());
	 map.put("expand", resource.getExpand());
	 map.put("expanded", 1 == resource.getExpand());
	 */
%>

<script type="text/javascript">
	_resourceData = [ {
		id : "001",
		name : "实时监控",
		cusCode : "100",
		code : "100",
		parentCode : "0",
		resUrl : "",
		type : "S",
		sortNo : 1,
		grade : 1,
		leaf : 1,
		enable : 2,
		visiable : 3,
		iconCls : '',
		expand : false,
		expanded : false
	},{
		id : "002",
		name : "历史查询",
		cusCode : "100",
		code : "100",
		parentCode : "0",
		resUrl : "",
		type : "S",
		sortNo : 1,
		grade : 1,
		leaf : 1,
		enable : 2,
		visiable : 3,
		iconCls : '',
		expand : false,
		expanded : false
	},{
		id : "003",
		name : "应用管理",
		cusCode : "100",
		code : "100",
		parentCode : "0",
		resUrl : "",
		type : "S",
		sortNo : 1,
		grade : 1,
		leaf : 1,
		enable : 2,
		visiable : 3,
		iconCls : '',
		expand : false,
		expanded : false
	},{
		id : "004",
		name : "用户管理",
		cusCode : "100",
		code : "100",
		parentCode : "0",
		resUrl : "",
		type : "S",
		sortNo : 1,
		grade : 1,
		leaf : 1,
		enable : 2,
		visiable : 3,
		iconCls : '',
		expand : false,
		expanded : false
	} ];

	app.res.init(_resourceData);

	var _modules = app.res.getModules();

	var _navStr = [];

	app.res.eachResources(_modules, function(i, v) {
		_navStr.push('<li code="' + v.code + '">');
		_navStr.push('<div class="limg"></div>');
		_navStr.push('<div class="rimg">' + v.name + '</div>');
		_navStr.push('</li>');
		return i < 8;
	});
	$("#navItems").html(_navStr.join(""));

	// 树面板
	$("#navItems li").click(function() {
		$("#sysMenu li.selected").removeClass("selected");
		var $this = $(this).addClass("selected");
		var code = $this.attr("code");
		bindResourceToNav(code);
		app.bindResourceToLeftOpTabTree(code);
	});

	function bindResourceToNav(code) {
		var html = [];
		app.res
				.eachChildrens(
						code,
						function(i, v) {
							if (v.menuShowInNav == 1) {
								html
										.push('<a href="" style="font-size: 13px; margin-right: 10px;color:#333" code="' + v.code + '">');
								html.push(v.name);
								html.push('</a>');
							}
						});
		$("#nav2_items").html(html.join(''));
	}

	$("#nav2_items").click(function(evt) {
		if (evt.target.tagName == "A") {
			var code = $(evt.target).attr("code");
			app.bindResourceToLeftOpTabTree(code);
			evt.preventDefault();
		}
	});

	Ext.onReady(function() {
		var defCode = "104";
		var res = app.res.getResByCode(defCode);
		if (res) {
			res.expanded = true;
			$("#sysMenu li[code='" + defCode + "']").click();
		}
		return;
	});

	function changeTheme(obj) {
		doLink(document, obj);
		app.mainTabPanel.items
				.each(function(v) {
					var iframe = $("iframe", v.getEl().dom)[0];
					var iframeDoc = (iframe.contentWindow || iframe.contentDocument).document;
					doLink(iframeDoc, obj);
				});
		createCookie("theme", obj.value, 365);
	}

	function doLink(doc, obj) {
		var theme = obj.value, css = $theme[obj.value];
		var link = doc.getElementById("ext-css");
		if (theme == "def") {
			if (link != null) {
				link.disabled = true;
			}
			return;
		}

		if (link == null) {
			var $link = $("<link>").attr({
				id : "ext-css",
				rel : "stylesheet",
				type : "text/css",
				href : css
			});
			$("#ext-all", doc).after($link);
		} else {
			link.href = css;
			link.disabled = false;
		}
	}

	function createCookie(name, value, days) {
		if (days) {
			var date = new Date();
			date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
			var expires = "; expires=" + date.toGMTString();
		} else {
			expires = "";
		}
		value = escape(value);
		document.cookie = name + "=" + value + expires + "; path=/";
	}

	function readCookie(name) {
		var nameEQ = name + "=", ca = document.cookie.split(';'), i, c, len = ca.length;
		for (i = 0; i < len; i++) {
			c = ca[i];
			while (c.charAt(0) == ' ') {
				c = c.substring(1, c.length);
			}
			c = unescape(c);
			if (c.indexOf(nameEQ) == 0) {
				return c.substring(nameEQ.length, c.length);
			}
		}
		return null;
	}

	window.onload = function(e) {
		//var theme = readCookie("theme");
		readCookie("theme");
	};

	window.onunload = function(e) {
		// createCookie("theme", "def", 365);
	};

	// 日期
	function Clock(c) {
		this.target = c.el; // id
		this.now = new Date();
		this.start = function() {
			this.move(this);
		};
		this.move = function(clock) {
			setTimeout(function() {
				clock.move(clock);
			}, 1000);
			this.now = new Date();
			this.update();
		};
		this.update = function() {
			var m = [];
			m.push(this.now.getFullYear() + "年");
			m.push((this.now.getMonth() + 1) + "月");
			m.push(this.now.getDate() + "日");
			m.push("&nbsp;");
			m.push(this.check(this.now.getHours()) + ":");
			m.push(this.check(this.now.getMinutes()) + ":");
			m.push(this.check(this.now.getSeconds()));
			$("#" + this.target).html(m.join(""));
		};
		this.check = function(m) {
			return m > 9 ? m : "0" + m;
		};
	}
	new Clock({
		el : "current_time"
	}).start();

	// 密码修改
	function updatePassword() {
		var me = this;
		if (!this.w) {
			this.w = new Ext.Window({
				title : "密码修改",
				iconCls : "password",
				modal : true,
				width : 444,
				height : 150,
				buttonAlign : "center",
				buttons : [ {
					text : "确定",
					handler : function() {
						K.service($path + "/user/modifyPassword.do", K.input({
							form : "#user-modify-passoword-form",
							success : function(text) {
								var output = K.output(text);
								if (!output.showError()) {
									K.msg("密码修改成功.");
									me.w.hide();
								}
							}
						}));
					}
				}, {
					text : "取消",
					handler : function() {
						me.w.hide();
					}
				} ]
			});
		}
		this.w.show();
		this.w.load({
			url : $path + "/user/modifyPassword.do"
		});
	}

	// 注销
	function logout() {
		if (confirm("您确定要注销吗?")) {
			window.location.href = "${$path}/login/out.do?url=${$logoutUrl}";
		}
	}
</script>